<template>
    <div>
        <!-- NavBar区域 -->
        <!-- 加入条件判断, 当前路由是/home时 只显示标题 否则显示标题与返回箭头 -->
        <van-nav-bar v-if="isHome" title="黑马优购"/>
        <van-nav-bar v-else title="黑马优购" fixed>
            <div class="left_arrow" @click="()=>{ $router.go(-1) }" slot="left">
                <van-icon name="arrow-left"/>
                <span>返回</span>
            </div>
        </van-nav-bar>
        <!-- 用于展示路由页面 -->
        <router-view></router-view>
        <!-- tabbar区域 -->
        <!-- 给tabbar 组件自定义 icon 图标的 slot 绑定数据 ,为 tabbar-item设置路由模式 -->
        <van-tabbar active-color="#d81e06" v-model="active">
            <van-tabbar-item name="/home" to="/home">
                <span>首页</span>
                <img slot="icon" slot-scope="props" :src="props.active ? icon.home_a : icon.home_n">
            </van-tabbar-item>
            <van-tabbar-item name="/cates" to="/cates">
                <span>分类</span>
                <img
                    slot="icon"
                    slot-scope="props"
                    :src="props.active ? icon.cates_a : icon.cates_n"
                >
            </van-tabbar-item>
            <van-tabbar-item name="/search" to="/search">
                <span>搜索</span>
                <img
                    slot="icon"
                    slot-scope="props"
                    :src="props.active ? icon.search_a : icon.search_n"
                >
            </van-tabbar-item>
            <van-tabbar-item name="/cart" to="/cart" :badge="$store.getters.totalGoods">
                <span>购物车</span>
                <img slot="icon" slot-scope="props" :src="props.active ? icon.cart_a : icon.cart_n">
            </van-tabbar-item>
            <van-tabbar-item name="/my" to="/my">
                <span>我的</span>
                <img slot="icon" slot-scope="props" :src="props.active ? icon.my_a : icon.my_n">
            </van-tabbar-item>
        </van-tabbar>
        <!-- :src="props.active ? icon.home_a : icon.home_n" 
        表示选中时 展示icon.home_a 未选中时 展示 icon.home_n-->
    </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0, // 默认被选中的项
      icon: {
        // tabbar组件自定义icon图片的数据源
        home_n: "icons/home.png",
        home_a: "icons/home-active.png",
        cates_n: "icons/cates.png",
        cates_a: "icons/cates-active.png",
        search_n: "icons/search.png",
        search_a: "icons/search-active.png",
        cart_n: "icons/cart.png",
        cart_a: "icons/cart-active.png",
        my_n: "icons/my.png",
        my_a: "icons/my-active.png"
      }
    };
  },
  created() {
    //  在Index.vue的created生命周期函数中 获取当前的路由path 来确定被选中的是哪一个tabbar
    this.active = this.$route.path;
  },
  computed: {
    // 添加计算属性用于判断当前页面的路由
    isHome: function() {
      if (this.$route.path == "/" || this.$route.path == "/home") {
        return true;
      } else {
        return false;
      }
    }
  },
  // 添加watch 侦听器 监听路由变化 来保证页面刷新切换之后 tabbar选中项不会出问题
  watch: {
    "$route.path": function(value) {
      this.active = value;
    }
  }
};
</script>

<style lang="less" scoped>
</style>